<template>
  <div class="tabbar">
    <div class="tabbar_left">
      <!--顶部左侧静态-->
      <!--面包蟹-->
      <!--动态生成面包蟹-->
      <el-breadcrumb separator-icon="ArrowRight">
        <el-breadcrumb-item v-for="(item,index) in $route.matched" :key="index" v-show="item.meta.title"
                            :to="item.path">
          <div style="display: flex; align-items: center">
            <!--面包蟹，展示匹配路由标题-->
            <el-icon>
              <component :is="item.meta.icon"></component>
            </el-icon>
            <span style="margin-left: 3px">{{ item.meta.title }}</span>
          </div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="tabbar_right">
      <!--顶部右侧静态 -->
      <el-button size="default" icon="Refresh" circle @click="updateRefresh"></el-button>
      <el-button size="default" icon="FullScreen" circle @click="fullScreen"></el-button>
      <el-button size="default" icon="Setting" circle @click="setTheme"></el-button>
      <el-drawer title="主题设置" v-model="draw" size="20%">
        <!--表单组件-->
        <el-form>
          <el-form-item label="主题颜色">
            <el-color-picker v-model="themColor" show-alpha @change="setColorThem"/>
          </el-form-item>
          <el-form-item label="暗黑模式">
            <el-switch v-model="darkThem" active-action-icon="Moon" inactive-action-icon="Sunny" @change="changeThem"/>
          </el-form-item>
        </el-form>
      </el-drawer>
      <img :src="useUserStore.avatar" style="margin-left: 25px; margin-right: 10px; border-radius: 50%" width="32px"
           height="32px">
      <!--下拉菜单-->
      <el-dropdown>
        <span style="margin-right: 20px">
          {{ useUserStore.username }}
          <el-icon><arrow-down/></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-item @click="logOut">退出登录</el-dropdown-item>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useRoute} from 'vue-router';
//@ts-ignore
import useLayOutSettingStore from "@/piniaStore/moudules/settingStore.ts";
//@ts-ignore
import userStore from "@/piniaStore/moudules/userStore.ts";
import {useRouter} from "vue-router";
import {ref} from "vue";

let $route = useRoute();
let $router = useRouter();//获取路由器对象
//获取layout小仓库
let layoutStore = useLayOutSettingStore();
//获取用户小仓库
let useUserStore = userStore();
//收集颜色的数据
let themColor = ref<string>();
//收集开关的数据
let darkThem = ref<boolean>(false);
//控制抽屉的显示
let draw = ref<boolean>(false);

//刷新按扭的回调
const updateRefresh = () => {
  layoutStore.refresh = !layoutStore.refresh;
  window.location.reload();
}

//全屏按扭点击回调
let fullScreen = () => {
  //DOM对象的属性，判断是否全屏【true/false】
  let full = document.fullscreenElement;
  if (!full) {
    //全屏
    document.documentElement.requestFullscreen();
  } else {
    //退出全屏
    document.exitFullscreen();
  }
}


//switch开关的change的事件回调
const changeThem = () => {
  //获取html根节点
  let html = document.documentElement;
  darkThem.value ? html.className = 'dark' : html.className = '';
}

// 退出登录回调
let logOut = async () => {
  //清除用户小仓库[token|username|avatar]
  await useUserStore.userLogOut();
  //跳转到登录页
  $router.push({path: '/login'});
}

//显示抽屉
const setTheme = () => {
  draw.value = true;
}

//设置主题颜色的回调
const setColorThem = () => {
  //通过js 修改根节点样式对象的属性值
  let html = document.documentElement;
  html.style.setProperty('--el-color-primary', themColor.value as string);
}

</script>

<style scoped lang="scss">
.tabbar {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  //background-image: linear-gradient(to right, #c7c1c1, #ded0d0, #a8b2b1);

  .tabbar_left {
    margin-left: 20px;
    display: flex;
    align-items: center;
  }

  .tabbar_right {
    display: flex;
    align-items: center;
  }
}

</style>